import React, {Component} from 'react'
import {Button, Input, message, Spin, Table} from "antd"
import {RootState} from '../../../../../reducers/index'
import {connect, ConnectedProps} from 'react-redux'
import ButtonGroup from 'antd/lib/button/button-group'
import {
    listDeletedManufacturer,
    queryDeletedManufacturerAmount,
    searchDeletedManufacturer
} from "../../../../../requests/Manufacturer";
import recoverManufacturerModal from "./RecoverMunufacturerModal";
import ManufacturerInfo from "../../../../../types/ManufacturerInfo";
import {getRes} from "../../../../../configFile";

interface PropsFromRedux extends ConnectedProps<typeof connector> {
}

interface IState {
    ManufacturerSource: Array<ManufacturerInfo & { key: number }>       //显示信息
    amount: number                                                          //总共条目
    offset: number                                                          //偏移量
    limit: number                                                           //条数
    isLoading: boolean                                                       //是否加载中
    modifyModalVisible: boolean,                                             //编辑的模态框是否为显示状态
    isSearch: boolean
}

const {Search} = Input;

class DeletedManufacturerList extends Component<PropsFromRedux, IState> {
    constructor(props: PropsFromRedux) {
        super(props)
        this.state = {
            ManufacturerSource: [],
            amount: 0,
            offset: 0,
            limit: 10,
            isLoading: true,
            modifyModalVisible: false,
            isSearch: false
        }
    }


    //恢复厂商
    recoverManufacturer = (manufacturerID: number, manufacturerName: string, refresh: () => void) => {
        recoverManufacturerModal(manufacturerID, manufacturerName, refresh)
    }


    //获取厂商数据
    getManufacturer = async () => {
        try {
            this.setState({
                ...this.state,
                isLoading: true
            })
            const amountRes = getRes(await queryDeletedManufacturerAmount())
            const res = getRes(await listDeletedManufacturer(this.state.offset, this.state.limit))

            this.setState({
                ManufacturerSource: res.data.map((item: ManufacturerInfo) => Object.assign({}, item, {key: item.manufacturerID})),
                amount: amountRes.data
            })
        } catch (error) {
            message.error(error.toString())
        } finally {
            this.setState({
                ...this.state,
                isLoading: false
            })
        }
    }

    async componentDidMount() {
        await this.getManufacturer()
    }

    columns = [{
        title: '厂商名称',
        dataIndex: 'manufacturerName',
        key: 'manufacturerName',
    },
        {
            title: '厂商联系电话',
            dataIndex: 'manufacturerTelephone',
            key: 'manufacturerTelephone',
        },

        {
            title: '操作',
            key: 'action',
            render: (record: ManufacturerInfo) => (
                <ButtonGroup>
                    <Button size='middle' danger
                            onClick={this.recoverManufacturer.bind(this, record.manufacturerID, record.manufacturerName, this.getManufacturer)}>恢复</Button>
                </ButtonGroup>
            )
        }]

    onSearch: (values: string) => void = async values => {
        console.log(values)
        if (values === '') {
            await this.getManufacturer()
        } else {
            try {
                const res = getRes(await searchDeletedManufacturer(values))
                if (res.isSuccessful) {
                    this.setState({ManufacturerSource: res.data, amount: res.data.length, isSearch: true})
                } else {
                    console.error(res);
                    message.error("查询失败")
                }
            } catch (err) {
                message.error(JSON.stringify(err))
            }
        }
    }

    render() {
        return (
            <div>
                <Spin spinning={this.state.isLoading}>
                    <Search placeholder="搜索" onSearch={values => this.onSearch(values)} allowClear={true} enterButton/>
                    <Table columns={this.columns}
                           dataSource={this.state.ManufacturerSource}
                           pagination={{
                               onChange: this.state.isSearch ? undefined : (page, pageSize) => {
                                   console.log(page, pageSize);
                                   if (!!pageSize) {
                                       this.setState({
                                           offset: (page - 1) * (pageSize),
                                           limit: (pageSize)
                                       }, () => {
                                           this.getManufacturer()
                                       })
                                   } else {
                                       console.error('pageSize == undefined')
                                   }
                               },
                               defaultPageSize: this.state.limit,
                               total: this.state.amount,
                               showSizeChanger: false
                           }}/>
                </Spin>

            </div>
        )
    }
}

//connect加入props
const mapStateToProps = (state: RootState) => {
    return {
        userID: state.loginReducers.userID
    }
}

const connector = connect(mapStateToProps)
export default connector(DeletedManufacturerList)